<template>
  <h1 id="title">新闻头条</h1>
  <div id="link-wrapper">
    <router-link to="toutiao">头条新闻</router-link>
    <router-link to="category">分类新闻</router-link>
  </div>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App"
}
</script>

<style scoped lang="stylus">
  #title
    width 100%
    height 50px
    text-align center
    line-height 50px
    background-color #ff0036
    font-size 20px
    color #fff
  #link-wrapper
    display flex
    width 100%
    height 30px
    justify-content center
    align-items center
    a
      position relative
      box-sizing border-box
      margin 0 10px
      text-decoration none
      color #000
    .router-link-active::after
      position absolute
      bottom -6px
      display block
      content ''
      width 100%
      height 2px
      background-color red
</style>